<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    class eventBus {
      constructor() {
        this.handlers = {}
      }
      // 监听事件
      on(event, callBack) {
        if (this.handlers[event]) {
          this.handlers[event].push(callBack)
        } else {
          this.handlers[event] = [callBack]
        }
      }

      // 触发事件
      emit(event, value) {
        if (this.handlers[event]) {
          // 遍历并执行数组里面的每一个回调函数
          this.handlers[event].forEach(callBack => callBack(value))
        } else {
          // 没有对应的监听回调函数，抛出异常
          throw new Error("报错")
        }
      }
    }
    const EventBus = new eventBus()
    EventBus.on('x', (e) => {
      console.log('x被触发了', e)
    })
    EventBus.emit('x', '我是参数')
    EventBus.emit('y', '我是参数')
  </script>
</body>

</html>